<template>
    <el-container>
        <el-header style="background-color: #007aff;">Header</el-header>
        <el-container>
            <el-aside width="210px" style="background-color: #FFFFFF;box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);">
                <el-menu router active-text-color="#ffd04b"
                    style="text-align: left;background-color: #FFFFFF;">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">导航一</span>
                        </template>
                        <el-menu-item index="/sysUser/index">选项1</el-menu-item>
                        <el-menu-item index="/sysUser/view">选项2</el-menu-item>
                        <el-menu-item index="/sysUser/edit">选项3</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span slot="title">导航二</span>
                        </template>
                        <el-menu-item index="/sysUser/index1">选项2-1</el-menu-item>
                        <el-menu-item index="/sysUser/view2">选项2-2</el-menu-item>
                        <el-menu-item index="/sysUser/edit3">选项2-3</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="header-breadcrumb">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-header>
                <el-main>
                    <div style="padding: 10px 10px;background-color: #eeeff4;">
                        <router-view></router-view>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data() {
        return {}
    },
    mounted() {
        console.log('route', this)
    }
}
</script>

<style scoped>
.el-header,
.el-main,
.el-container {
    height: 100%;
    width: 100%;
    padding: 0 0;
    margin: 0 0;
    background-color: #eeeff4;
}

.el-menu,
.el-menu-item,
.el-submenu__title,
.el-submenu__title,
.el-menu-item-group__title,
.el-menu-item-group {
    font-size: 16px;
    border-right: 0;
}

.el-menu-item {
    padding-left: 50px !important;
}

.header-breadcrumb {
    padding-left: 15px;
    height: 54px;
    background-color: #FFFFFF;
    border-left: 0.5px solid #e4e4e4;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

router-view {
    height: 100%;
    width: 100%;
    background-color: #FFFFFF;
}
</style>